<template>
	<view class="product_details">
		<scroll-view v-if="projectDetail.name" class="scroll_view" :scroll-into-view="toView" scroll-y="true" >
			<fui-swiper-dot :items="projectDetail.images" :current="current">
				<swiper class="image" :style="{'height':height+'px'}" @change="change" circular :indicator-dots="false"
					>
					<swiper-item v-for="(item,index) in projectDetail.images" :key="index">
						<image style="width: 100%;height: 100%;" :src="item" mode=""></image>
					</swiper-item>
				</swiper>
			</fui-swiper-dot>
			<view class="content">
				<view class="project_dtail">
					<view class="title">{{projectDetail.name}}</view>
					<!-- <view class="function">{{projectDetail.detail}}</view> -->
					<view class="price_and_time">
						<view class="price">
							￥<text>{{projectDetail.price}}</text>
						</view>
						<view class="time">
							<view class="">
								<image src="/static/images/time.png" mode=""></image>
								{{projectDetail.duration}}分钟
							</view>
						</view>
						<view class="text">
							<text>{{projectDetail.sales}}</text><text class="tips">人选择</text>
						</view>
					</view>
					<!-- <image src="/static/images/index.png" mode="" style="width: 100%;height: 55px;" ></image> -->
					<!-- 资质 -->
					<view class="aptitude">
						<view class="title">
							极速服务
						</view>
						<view class="">
							<image src="/static/images/technician/security.png" mode=""></image>
							<text>实名认证</text>
						</view>
						<view class="">
							<image src="/static/images/technician/refund.png" mode=""></image>
							<text>爽约包退</text>
						</view>
						<view class="" @click="gourls">
							<image src="/static/images/technician/certificate.png" mode=""></image>
							<text>资质证书</text>
						</view>
					</view>
					<view class="apply">
						<view class="title">
							人群适用说明
						</view>
						<view class="sex">
							<text>适用性别</text>
							{{projectDetail.sex_text}}
						</view>
						<view class="sex">
							<text>适用人群</text>
							{{projectDetail.crowd}}
						</view>
					</view>
					<view class="qualifications" style="width: 100%;" >
						<view class="title">
							项目详情
						</view>
						<view class="rich_text">
							<rich-text :nodes="projectDetail.detail"></rich-text>
						</view>
						<!-- <image style="width: 100%;" mode="widthFix" :src="projectDetail.images[0]"></image> -->
					</view>
				</view>
				<view class="project_img">
					<view class="title">
						下单须知
					</view>
					<view class="notice">
						<view class="rich_text notice_content">
							<rich-text :nodes="projectDetail.site_image_order"></rich-text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom">	
			<view class="right">
				<view class="convention" @click="goTechnician">
					选择技师
				</view>
			</view>
		</view>
		<view class="top_nav" :style="{'opacity':opacity}">
			<view @click="checkNav(index)" :class="[{'nav_active':index == cureent}]" v-for="(item,index) in topNav" :key="index">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	// import topTitle from "@/components/topTitle.vue"
	export default {
		// components:{
		// 	topTitle
		// },
		data() {
			return {
				limit:1,
				size:10,
				bigSrc:'',
				bigImgFlag:false,
				projectId:'',
				current: 0,
				projectDetail:{	
					// id:1,
					// title:'香锤疗法+扶阳艾灸1',
					// function:'缓解疲劳，养生保健',
					// price:'198',
					// time:'60',
					// image:'/static/images/1.webp'
				},
				technicianChex:false,
				technicianList:[],
				topNav:[{text:'项目',href:'image'},{text:'详情',href:'project_dtail'},{text:'下单须知',href:'project_img'}],
				cureent:0,
				toView:"",
				opacity:0,
				height:"",
			};
		},
		onPageScroll(e){
			let opacity = 0;
			this.opacity = Math.floor(e.scrollTop / 30) * 0.1
		},
		onLoad(options){
			console.log(options)
			let object = uni.getSystemInfoSync()
			console.log(object,'----------------------object')
			this.height = object.windowWidth
			this.projectId = options.id
			let that = this;
			this.$http({
				url:`/api/product/info/${options.id}`,
				method:'get',
				success:result=>{
					console.log(result,'111')
					that.projectDetail = result.data.info;
					console.log(that.projectDetail,'-----------------123123')
				}
			})
		},
		onShow() {
			this.visitRecord()
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			//用户访问日志
			visitRecord(){
				// #ifdef H5
				navigator.geolocation.getCurrentPosition((res) => {
					this.$http({
						url:'/api/view_log',
						method:'post',
						data:{
							page:3,
							latitude:res.coords.latitude,
							longitude:res.coords.longitude
						},
						success:result=>{
							console.log(result)
						}
					})
				}, function(error) {
					uni.showToast({
						title: '加载失败,请刷新重试',
						icon: "none"
					})
				});
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	isHighAccuracy:true,
				// 	highAccuracyExpireTime:3000,
				// 	success: (res) => {
				// 		this.$http({
				// 			url:'/api/view_log',
				// 			method:'post',
				// 			data:{
				// 				page:3,
				// 				latitude:res.latitude,
				// 				longitude:res.longitude
				// 			},
				// 			success:result=>{
				// 				console.log(result)
				// 			}
				// 		})
				// 	}
				// })
				// #endif
				// #ifdef APP-PLUS
				let locationType = '';
				if (uni.getSystemInfoSync().platform =='android') { //android终端
					locationType = 'gcj02'
				} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
					locationType = 'wgs84'
				}
				uni.getLocation({
					type:locationType,
					success: (res) => {
						this.$http({
							url:'/api/view_log',
							method:'post',
							data:{
								page:3,
								latitude:res.latitude,
								longitude:res.longitude
							},
							success:result=>{
								console.log(result)
							}
						})
					}
				})
				// #endif
			},
			checkNav(i){
				this.cureent = i
				let index = this.topNav[i].href
				uni.createSelectorQuery().select('.'+index).boundingClientRect(data=>{//目标位置的节点：类class或者id
					uni.createSelectorQuery().select(".scroll_view").boundingClientRect(res=>{//最外层盒子的节点：类class或者id
						uni.pageScrollTo({
							duration: 0,//过渡时间
							// scrollTop:data.top + 0 - res.top,//到达距离顶部的top值,300这个值根据自己情况调
							scrollTop:data.top - 50 - res.top,//如果置顶
						})
					}).exec()
				}).exec();
				// console.log(e,'-------------e')
			},
			goTechnician(){
				// this.technicianChex = !this.technicianChex
				// uni.navigateTo({
				// 	url:'/pages/technician/index?id=1'
				// })
				uni.reLaunch({
					url:`/pages/technician/index?id=${this.projectDetail.id}`
				})
			},
			bigImg(str){
				console.log(str,'str')
				this.bigImgFlag = !this.bigImgFlag
				this.bigSrc = str
			},
			close(){
				this.bigImgFlag = !this.bigImgFlag
			},
			goIndex(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			gourls(){
				uni.navigateTo({
					url:'/pages/index/indexs'
				})
			}
		},
		
		
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
		
	}
	.big_img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		padding: 25% 5%; 
		image{
			width: 90%;
			height: 50%;
		}
	}
	.product_details{
		
		width: 100%;
		// height: 100%;
		// height: auto; 
		/* #ifdef APP-PLUS */
		margin-top: 50rpx;
		/* #endif */
		overflow-y: auto;
		.image{
			// height: 310px;
			>image{
				width: 100%;
				height: 100%;
			}
		}
		.bottom{
			// position: fixed;
			// bottom: 0;
			width: 100%;
			height: 74px;
			background: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #eee;
			position: fixed;
			bottom: 0;
			margin-bottom: var(--window-bottom);
			.left{
				width: 20%;
				display: flex;
				// display: -webkit-flex;
				justify-content: space-around;
				.chex{
					display: flex;
					// display: -webkit-flex;
					// -webkit-flex-direction:column;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					image{
						width: 30px;
						height: 30px;
					}
					p{
						font-size: 20rpx;
						color: #b3b3b3;
						margin-top: -10rpx;
					}
				}
			}
			.right{
				padding: 0 20px;
				width: 100%;
				.convention{
					padding: 9px 0px;
					color: #fff;
					font-weight: bold;
					font-size: 18px;
					border-radius: 5px;
					background: #24D576;
					text-align: center;
				}
			}
		}
		.content{
			flex: 1;
			overflow-y: auto;
			padding-bottom: 50px;
			// padding: 10px 15px; 
			.project_dtail{
				// border-bottom: 2px solid #999;
				>view{
					background-color: #fff;
					padding-left: 10px;
				}
				.title{
					font-size: 20px;
					font-weight: bold;
					height: 20%;
					padding-top: 10px;
					padding-bottom: 10px;
					color: #666;
				}
				.function{
					color: #666;
					height: 60%;
					padding: 5px 10px;
				}
				.price_and_time{
					display: flex;
					// display: -webkit-flex;
					align-items: center;
					justify-content: space-between;
					padding-right:30px;
					.price{
						color: #fd5c5b;
						font-weight: bold;
						margin-right: 15px;
						display: flex;
						>text{
							font-size: 22px;
						}
					}
					.time{
						display: flex;
						// display: -webkit-flex;
						align-items: center;
						padding-top: 5px;
						view{
							display: flex;
							align-items: center;
							image{
								width: 15px;
								height: 15px;
								margin-right: 5px;
							}
						}
					}
					>.text{
						color: #666;
						display: block;
						margin-left: 15px;
						.tips{
							margin-left: 5upx;
							font-size: 12px;
						}
					}
				}
				.aptitude{
					height: 66upx;
					line-height: 66upx;
					padding: 10upx 0;
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20upx;
					padding-right: 30px;
					>.title{
						font-size: 32upx;
						font-weight: bold;
						color: #24D576;
						margin-left: 20px;
					}
					image{
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
					>view{
						display: flex;
						font-size:12px;
						align-items: center;
					}
				}
				.apply{
					padding: 10px;
					margin: 5px 0 12px 0;
					.title{
						margin-bottom:20px;
						font-size: 16px;
						font-weight: 400;
						color: #666;
					}
					.sex{
						margin-top: 10px;
						color: #000;
						font-weight: bold;
						text{
							font-size: 13px;
							color: #9c9c9c;
							font-weight: bold;
							margin-right: 20px;
						}
					}
				}
				.qualifications{
					background:none;
					padding: 0;
					.title{
						padding: 10px 12px;
						font-size: 16px;
						font-weight: 400;
						background-color: #fff;
						color: #666;
					}
				}
			}
			.project_img{
				margin: 20px 0;
				.title{
					font-size: 16px;
					background-color: #fff;
					padding: 15px 12px ;
					font-weight: 400;
					color: #666;
				}
			}
		}
		.technician_details{
			width: 100%;
			height: 100%;
			display: flex;
			// display: -webkit-flex;
			flex-direction: column;
			// -webkit-flex-direction:column;
			justify-content: space-around;
			position: absolute;
			top: 0;
			left: 0;
			.image{
				width: 100%;
				height: 310px;
				background: #000;
				opacity: 0.4;
			}
			.technician_list{
				background-color: #eee;
				flex: 1;
				// -webkit-flex:1;
				// max-height: 500px;
				overflow-y: auto;
				padding: 10px 15px;
				display: flex;
				// display: -webkit-flex;
				flex-direction: column;
				// -webkit-direction: column;
				.technician_list-item{
					display: flex;
					// display: -webkit-flex;
					background: #fff;
					margin-bottom: 10px;
					border-radius: 8px;
					.left{
						display: flex;
						// display: -webkit-flex;
						flex-direction: column;
						// -webkit-direction: column;
						align-items: center;
						justify-content: space-around;
						padding-left: 5px;
						image{
							width: 82px;
							height: 82px;
							border-radius: 50%;
						}
						.type{
							padding: 2px 10px;
							background: #24D576;
							border-radius: 10px;
							color: #fff;
						}
					}
					.right{
						flex: 1;
						// -webkit-flex:1;
						padding: 5px 10px;
						display: flex;
						// display: -webkit-flex;
						flex-direction: column;
						// -webkit-flex-direction: column;
						view{
							display: flex;
							// display: -webkit-flex;
							justify-content: space-between;
						}
						.top{
							.work_time{
								padding: 0px 5px;
								background: #24D576;
								border-radius: 5px;
								color: #666;
							}
						}
						.main{
							justify-content: left;
							padding: 10px 0;
							.score{
								margin-right: 10px;
								align-items: center;
								image{
									width: 12.5px;
									height: 12.5px;
									margin-right: 5px;
								}
								text{
									font-weight: bold;
									color: #fd5c5b;
								}
							}
							.served{
								color: #656565;
								font-weight: 400;
							}
						}
						.footer{
							.comment{
								align-items: center;
								display: flex;
								align-items: center;
								>text{
									font-size: 14px;
									margin-left: 2px;
								}
								image{
									width: 23px;
									height: 23px;
								}
							}
							.appointment{
								display: flex;
								flex-direction: column;
								align-items: center;
								margin-bottom: 10px;
								.distance{
									align-items: center;
									image{
										width: 14px;
										height: 14px;
										margin-right: 2px;
									}
								}
								.convention{
									padding: 5px 15px;
									color: #fff;
									font-weight: bold;
									font-size: 16px;
									border-radius: 7px;
									background: #24D576;
								}
							}
						}
					}
				}
			}
		}
		.top_nav{
			width: 100%;
			display: flex;
			z-index: 10;
			align-items: center;
			position: fixed;
			top: 0;
			/* #ifdef APP-PLUS */
			top: 50rpx;
			/* #endif */
			>view{
				flex:1;
				text-align: center;
				padding:10px 5px;
				background-color: #fff;
				color: #656565;
			}
			.nav_active{
				color: #24D576;
			}
		}
	}
	.notice{
		background: #fff;
		padding: 0 25upx 25upx 25upx;
		.notice_content{
			background: #F7F7F7;
			border-radius: 30upx;
			padding: 20upx;
			line-height: 43upx;
		}
		p{
			background: #F7F7F7 !important;
		}
	}
	.rich_text img{
		max-width: 100%;
	}
	.rich_text p{
		background-color: #fff;
	}
	/deep/.fui-swiper__dot-bg{
		background: #24d576 !important;
	}
</style>
